<!-- 用户管理 -->

<template>
    <KeepAlive :include="[]">
        <component :is="curComponent" :userInfo="userInfo" @updateUserInfo="updateUserInfo"/>
    </KeepAlive>
</template>

<script setup>
import { ref } from 'vue';

import UserAdd from './c/UserAdd.vue';
import UserEdit from './c/UserEdit.vue';
import UserList from './c/UserList.vue';
import UserPreview from './c/UserPreview.vue';

const type = ref('list');
const userInfo = ref({});

const componentMap = {
    'list': UserList,
    'edit': UserEdit,
    'add': UserAdd,
    'preview': UserPreview
};

const curComponent = ref(UserList);

const updateUserInfo = (val) => {
    type.value = val.type;
    userInfo.value = val.userInfo;
    
    curComponent.value = componentMap[type.value];
};

</script>

<style lang="scss">
@import url('./index.scss');
</style>